import React from 'react';
import { useReducer } from 'react'
import Child1 from './Child1';
import Child2 from './Child2';
import contextObj from './context'
// useReducer hooks的使用步骤:
// 定义: 相当于一个小的redux 仓库, 几个组件可以共享使用和修改该仓库的数据

// useReducer 一般结合useContext 使用,然后这样就实现了几个组件之间的共享数据,
// 共享父组件中的数据  useReducer + useContext


// 第一步: 在函数组件外定义初始的状态
const defaultState = {
    count: 0,
    userinfo: {
        name: '范闲',
        age: 20
    }
}

// 第二步: 定义reducer 函数
const reducer = (state, actions) => {
    //注意: 不能直接修改原state,需要克隆一份
    // const newState = { ...state };
    if (actions.type == '+') {
        // newState.count += actions.payload
        return {
            ...state,
            count: state.count + 1
        }
    }
    if (actions.type == '-') {
        //newState.count -= actions.payload
        return {
            ...state,
            count: state.count + 1
        }
    }
    if (actions.type == 'addage') {
        // newState.userinfo.age += actions.payload
        return {
            ...state,
            userinfo: {
                ...state.userinfo,
                age: state.userinfo.age + 1
            }
        }
    }

    return state
}


const { Provider } = contextObj;
const Father = () => {
    //第三步 使用useReducer,创建store仓库数据和dispatch 方法
    // state: 就是仓库中的数据
    // dispatch: 就是修改state 数据的方法,用该dispatch派发任务修改state
    const [state, dispatch] = useReducer(reducer, defaultState);

    // console.log('store', store);
    // console.log('state', state);
    // console.log('dispatch', dispatch);


    return (
        <div>
            {/* 使用useReducer仓库中的数据 */}
            {/* <p>
                <button onClick={() => {
                    dispatch({ type: '+', payload: 1 })
                }}>+</button>

                count:{state.count}

                <button onClick={() => {
                    dispatch({ type: '-', payload: 1 })
                }}>-</button>
            </p> */}

            {/* 使用Child1组件 */}
            <Provider value={{
                state,
                dispatch
            }}>
                <Child1></Child1>
                <Child2></Child2>
            </Provider>


        </div>
    );
}

export default Father;
